<template>
	<view class="container">
		<view class="top-icon">
			<image :src="listdata.image_path" mode="" class="top-img"></image>
		</view>
		<view class="card" v-for="(item,index) in numlist">
			<view class="top-box">
				<view class="top-title">
					{{item.field_name}}
				</view>
			</view>
			<view v-for="(items,indexs) in item.field_cate_test">
				<view v-if="items.type == 1">
					<view class="text">{{items.title}}：{{items.value_test}}</view>
				</view>
				<view v-if="items.type == 2">
					<view class="text">{{items.title}}：
						<image :src="items.value_test" mode="" @tap="previewimage(items.value_test)" class="card-img"></image>
					</view>
				</view>
				<view v-if="items.type == 3">
					<view class="text">{{items.title}}：{{items.value_test}}</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<button type="primary" @tap="goinspection" class="btn">查看巡检记录</button>
			<button type="primary" @tap="gofailure" v-if="map_type == 1" class="btn" style="background: rgb(255, 138, 74) !important">添加巡检记录</button>
		</view>
	</view>
</template>

<script>
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getelevatorDetailds = () => {
		common.post('HouseApi&a=equipment_info', {
			village_id: _this.village_id,
			map_type: _this.map_type,
			qrcode_id: _this.qrcode_id,
		}, data => {
			console.log('++++', data)
			_this.listdata = data.wisdom_qrcode;
			_this.numlist = data.qrcode_list;
			_this.map_type = data.map_type;
			console.log("_this.map_type",_this.map_type)
			_this.tabsname = data.wisdom_qrcode.name
			console.log("heiheiheihei",_this.tabsname)
			uni.setNavigationBarTitle({
				title: _this.tabsname
			});
		});
	};
	export default {
		data() {
			return {
				listdata: {},
				numlist: {},
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				btn_style: '',
				qrcode_id: '',
				map_type: '',
				tabsname:'',
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		onLoad(options) {
			_this = this;
			_this.qrcode_id = options.qrcode_id;
			_this.map_type = options.map_type;
			// #ifdef H5
			console.log('准备跳小程序页', _this.id);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
					';';
				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};
				if (options.village_id && options.village_id != _this.village_id) {
					common.post('HouseApi&a=search_village', {
						village_id: options.village_id
					}, data => {
						_this.village_logo = data.village_logo ? data.village_logo : data.wechat_share_img;
						_this.village_id = options.village_id;
						_this.village_name = options.village_name;
						var res = {
							village_id: _this.village_id,
							village_name: _this.village_name,
							village_logo: _this.village_logo
						};
						if (options.pigcms_id) {
							res.pigcms_id = options.pigcms_id;
							_this.pigcms_id = options.pigcms_id;
						}
						uni.setStorageSync('village_key', res);
						getelevatorDetailds()
					});
					return false;
				}
				getelevatorDetailds()
			});
		},
		methods: {
			previewimage(url) {
				var imgs = [];
				var imgs = imgs.concat(url)
				console.log("66666666666", url)
				uni.previewImage({
					urls: imgs,
					success: function(res) {
						console.log('success', res)
					},
					fail: function(fail) {
						console.log('fail', fail)
					}
				})
			},
			goinspection() {
				uni.navigateTo({
					url: '/pages/village/smartQRcode/inspectionRecords?map_type=' + _this.map_type
				})
			},
			gofailure() {
				uni.navigateTo({
					url: '/pages/village/smartQRcode/failureReport?qrcode_id=' + _this.qrcode_id
				})
			}
		},
		components: {

		}
	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
	}

	.top-icon {
		margin: 20rpx;
		height: 350rpx;
		border-radius: 10rpx;
	}

	.top-img {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.card {
		background: #FFFFFF;
		margin: 30rpx 30rpx 0rpx 30rpx;
		padding: 0rpx 20rpx 20rpx 20rpx;
		border-radius: 20rpx;
	}

	.top-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #F1F1F1;
		margin-bottom: 10rpx;
	}

	.top-title {
		font-size: 30rpx;
		font-weight: 700;
		line-height: 90rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.top-title:before {
		content: '';
		background: #FFFFFF;
		display: block;
		width: 8rpx;
		height: 8rpx;
		border: 4rpx solid rgb(74, 151, 248);
		border-radius: 8rpx;
		margin-right: 15rpx;
	}

	.text {
		font-size: 26rpx;
		color: rgb(130, 130, 130);
		line-height: 50rpx;
	}

	.card-img {
		width: 200rpx;
		height: 200rpx;
		display: block;
	}

	.btn-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 100rpx 50rpx;
	}

	.btn {
		background: rgb(21, 127, 246) !important;
		width: 280rpx;
		box-shadow: 0rpx 0rpx 17rpx 1rpx rgba(216, 216, 216, 0.68);
		border-radius: 50rpx;
		font-size: 30rpx;
		line-height: 80rpx;
	}

	/deep/ uni-button:after {
		border: 0rpx;
	}
</style>
